<!DOCTYPE html>
<html>
	<head>
		<title>粗糙的五子棋</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,user-scalable=no">
		<style>
			*{margin:0;padding:0;}
			canvas{border:1px solid black;display:block;margin:20px auto;background-color: rgb(249,214,91);}
			p{width:300px;height:200px;border:1px solid black;background-color: #666;text-align: center;line-height: 200px;font-size: 50px;position:fixed;left:0;top:0;bottom:0;right:0;margin:auto;display:none;}
		</style>
	</head>
	<body>
	<div>
		<canvas id="chessboard" width="600" height="600">您的机器暂不支持画布</canvas>
	</div>
	<p id="win"></p>
		<script>
			try{
				//选取画布
				var canvas= document.getElementById("chessboard"),
					pEle= document.getElementById("win"),
					can= canvas.getContext("2d"),
					//某个开关
					witch= 0,
					//记录已下棋子
					arrb= [[-1,-1]],
					arrw= [[-1,-1]];
				//开始 把棋盘画好
				start();
				//绑定事件监听
				canvas.onclick= click;
			}catch(e){
				console.log("您的机器暂不支持画布");
			}
			//画线函数
			function start(){
				var a= 20;
				for(;a< 600;){
					//横向划线
					can.beginPath();
					can.moveTo(0,a);
					can.lineTo(600,a);
					can.stroke();
					//纵向划线
					// can.beginPath();
					can.moveTo(a,0);
					can.lineTo(a,600);
					can.stroke();
					a+= 20;
				}
			}
			//下棋 点击处理函数
			function click(e){
				e= e|| window.event;
				//获取点击位置的坐标
				var x= e.offsetX,
					y= e.offsetY,
					//取得点击位置坐标的十位数字 并/10 再通过计算得到棋盘上对应的点
					numx= parseInt( Number( x ) / 10 ),
					numX,
					numy= parseInt( Number( y ) / 10 ),
					numY;			
					//如果坐标是偶数直接用
				if( numx % 2 == 0 ){
					numX= numx * 10;
					//否则+1
				}else{
					numX=( numx + 1 ) * 10;
				}
				if( numy % 2 == 0 ){
					numY= numy * 10;
				}else{
					numY=( numy + 1 ) * 10;
				}
				//遍历棋局 看落点有没有子
				for(var a= 0; a< arrb.length; a++){
					if( arrb[a][0]== numX && arrb[a][1]== numY ){
						//如果落点有子跳出
						return false;
					}
				}
				for(var b= 0; b< arrw.length; b++){
					if( arrw[b][0]== numX && arrw[b][1]== numY ){
						//如果落点有子跳出
						return false;
					}
				}
				if(witch==0){					
					//没有子就将坐标存入记录 继续执行
					arrb.push( [numX,numY] );
				}else{					
					//没有子就将坐标存入记录 继续执行
					arrw.push( [numX,numY] );
				}		
				can.beginPath();
				can.arc(numX,numY,10,0,6.28);
				//判断落子颜色
				if(witch== 0){
					witch= 1;
					can.fillStyle= 'black';
				}else{
					witch= 0;
					can.fillStyle= 'white';
				}
				can.fill();
				//执行胜负判定函数
				win(numX,numY);				
			}
			//判定胜负
			function win(numX,numY){
				var arr1= [],
					arr2= [],
					arr3= [],
					arr4= [],
					arrb2= [],
					arrw2= [],
					a1= 0,a2= -4,
					num= 1;
				for(; a1< 9; a1++){
					arr1[a1]= numX + a2 * 20 +"+"+ Number(numY + a2 * 20);					
					arr2[a1]= numX - a2 * 20 +"+"+ Number(numY + a2 * 20);				
					arr3[a1]= numX + a2 * 20 +"+"+ numY;				
					arr4[a1]= numX +"+"+ Number(numY + a2 * 20);
					a2++;
				}
				if(witch){
					for(var b1=0;b1<arrb.length;b1++){
						arrb2[b1]=arrb[b1][0]+"+"+arrb[b1][1];
					}
					num=0;

					isWin(arrb2,arr1,0)

					isWin(arrb2,arr2,0)

					isWin(arrb2,arr3,0)

					isWin(arrb2,arr4,0)

				}else{
					for(var b2=0;b2<arrw.length;b2++){
						arrw2[b2]=arrw[b2][0]+"+"+arrw[b2][1];
					}
					num=0;
					
					isWin(arrw2,arr1,0)

					isWin(arrw2,arr2,0)

					isWin(arrw2,arr3,0)

					isWin(arrw2,arr4,0)
				}
			}
			function isWin(arr1,arr2,num){
				arr1.indexOf(arr2[4])!=(-1)&&num++;
				arr1.indexOf(arr2[3])!=(-1)&&num++;
				arr1.indexOf(arr2[2])!=(-1)&&num++;
				arr1.indexOf(arr2[1])!=(-1)&&num++;
				arr1.indexOf(arr2[0])!=(-1)&&num++;
				arr1.indexOf(arr2[5])!=(-1)&&num++;
				arr1.indexOf(arr2[6])!=(-1)&&num++;
				arr1.indexOf(arr2[7])!=(-1)&&num++;
				arr1.indexOf(arr2[8])!=(-1)&&num++;
				num>=5&&show();
			}
			//胜利显示函数
			function show(){
				//判断胜方颜色
				if(witch==0){
					pEle.innerHTML='白棋胜利';
				}else{
					pEle.innerHTML='黑棋胜利';
				}
				pEle.style.display="block";
				pEle.onclick=recover;
			}
			function recover(){
				document.location.reload();
			}
		</script>
	</body>
</html>